<%@page contentType="text/html" pageEncoding="UTF-8"%>

<style>
/************ panel process ****************/
		.panel-process{
			float:left;
			width: 100%;
			height: 500px;
			padding-left:5px;
			font-size: 15px;
		}
		.panel-process .panel-in-process{
			margin-top: 5px;
			margin-left: 3px;
			float:left;
			width: 100%;
			height: 490px;
			text-align: center;
			position: relative;
			border: solid 1px #e0dfdf;
		}
		.panel-process .panel-in-process:hover{
			outline: #e0dfdf solid 3px;
		}
		/****************** end panel process ************/
	
		/****************** panel payable ****************/
		.panel-payable{
			float:left;
			width: 100%;
			height: 500px;
			font-size: 15px;
		}
		.panel-payable .panel-in-payable{
			margin: 5px 5px 5px 2px;
			float:left;
			width: 100%;
			height: 490px;
			text-align: center;
			position: relative;
			border: solid 1px #e0dfdf;
		}
		.panel-payable .panel-in-payable:hover{
			outline: #e0dfdf solid 3px;
		}
		/****************** end panel payable ****************/
	
		/******************** panel transfer *****************/
		.panel-transfer{
			float:left;
			width: 100%;
			height: 500px;
			font-size: 15px;
		}
		.panel-transfer .panel-in-transfer{
			margin: 5px 5px 5px 8px;
			float:left;
			width: 100%;
			height: 490px;
			text-align: center;
			position: relative;
			border: solid 1px #e0dfdf;
		}
		.panel-transfer .panel-in-transfer:hover{
			outline: #e0dfdf solid 3px;
		}
		/******************** end panel transfer *****************/
	
		.panel-in-header{
			position: absolute;
			top: 0;
			width: 100%;
			height: 55px;
			font-weight: bold;
			font-size: 14px;
			text-align: center;
		}
		.panel-in-header table{
			font-size: 11px;
			margin: 5px auto 0px auto;
			border: 1px solid;
		}
		.panel-in-header table tr td{
			border: 1px solid #000000;
		}
		.panel-in-content{
			position: absolute;
			top: 55px;
			width: 100%;
			height: 405px;
			overflow: auto;
			text-align: center;
		}
		
		.panel-in-content a:hover{
			text-decoration: none;
			color:red;
		}
		.panel-in-footer{
			/*background-color:#dedede;*/
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 55px;
			font-weight: bold;
			font-size: 14px;
		}
		/**************************** End Panel ********************************/
	
		/********************** Custom Navigation Summary ************************/
		div.nav-summary{
			/*centering*/
			margin: 3px;
			height: 40px;
		}
		div.nav-summary span.process {
			text-decoration: none;
			outline: none;
			display: inline-block;
			float: left;
			line-height: 50px;
			height: 50px;
			width: 102.7%;
			text-align: center;
			color: #000;
			background: #6899c1;
			position: relative;
			font-weight: bold;
			z-index: 3;
		}
		div.nav-summary span.process:after {
			content: "";
			position: absolute;
			top: 50%;
			margin-top: -25px;
			border-top: 25px solid transparent;
			border-bottom: 25px solid transparent;
			border-left: 30px solid #6899c1;
			right: -31px;
			margin-right: 1px;
			cursor: default;
		}
		div.nav-summary span.payable {
			text-decoration: none;
			outline: none;
			display: inline-block;
			float: left;
			height: 50px;
			width: 92%;
			line-height: 50px;
			text-align: center;
			color: #000;
			background: #ef850a;
			position: relative;
			font-weight: bold;
			z-index: 2;
			padding-left: 40px;
		}
		div.nav-summary span.payable:before {
			content: "";
			position: absolute;
			top: 50%;
			margin-top: -25px;
			border-top: 25px solid transparent;
			border-bottom: 25px solid transparent;
			border-left: 30px solid #ffffff;
			left: 0px;
			margin-right: 1px;
			cursor: default;
		}
		div.nav-summary span.payable:after {
			content: "";
			position: absolute;
			top: 50%;
			margin-top: -25px;
			border-top: 25px solid transparent;
			border-bottom: 25px solid transparent;
			border-left: 30px solid #ef850a;
			right: -31px;
			margin-right: 1px;
			cursor: default;
		}
		div.nav-summary span.transfer {
			text-decoration: none;
			outline: none;
			display: inline-block;
			float: left;
			height: 50px;
			width: 93%;
			line-height: 50px;
			text-align: center;
			color: #000;
			background: #8ed04e;
			position: relative;
			font-weight: bold;
			z-index: 1;
			padding-left: 45px;
		}
		div.nav-summary span.transfer:before {
			content: "";
			position: absolute;
			top: 50%;
			margin-top: -30px;
			border-top: 30px solid transparent;
			border-bottom: 30px solid transparent;
			border-left: 35px solid #ffffff;
			left: 0px;
			margin-right: 1px;
			cursor: default;
		}
		div.nav-summary span.transfer:after {
			/*content: "";
			position: absolute;
			top: 50%;
			margin-top: -25px;
			border-top: 25px solid transparent;
			border-bottom: 25px solid transparent;
			border-left: 25px solid #8ed04e;
			right: -26px;
			margin-right: 1px;
			cursor: default;*/
		}
		/***************************** End Custom Navigation Summary ****************************************/
</style>
<div class="panel-block" style="width: 33%;margin-right:12px">
	<div class="nav-summary" style="margin-left: 0">
		<span class="process">ระหว่างประมวลผล <span id="totalProcess"></span>
			ล้านบาท
		</span>
	</div>
	<div class="panel-process" >
		<div class="panel-in-process">
			<div class="opacity panel-in-header"
				style="background-color: #779fc0">ระหว่างประมวลผล(ล้านบาท)
					<table cellpadding="0" cellspacing="0" width="100%">
						<tr>
							<td rowspan="2" width="25%">REP</td>
							<td rowspan="2" width="25%">ยอดชดเชย</td>
							<td colspan="2">OPREFER</td>
						</tr>
						<tr>
							<td width="25%">HMAIN</td>
							<td width="25%">NHSO</td>
						</tr>
					</table>
				</div>
			<div class="panel-in-content" id="processing"
				style="background-color: rgba(119, 158, 192, 0.2);"></div>
			<div class="opacity panel-in-footer"
				style="background-color: #779fc0">
				อยู่ระหว่างประมวลผล<br> <span id="totalProcessing"></span>
				ล้านบาท <br>จำนวน Rep <span id="totalRepProcessing"></span>
				รายการ
			</div>
		</div>
	</div>
</div>
<div class="panel-block" style="width: 33%;">
	<div class="nav-summary" style="margin-left: 0">
		<span class="payable">ตั้งหนี้ <span class="totalPayable"></span> ล้านบาท<br></span>
	</div>
	<div class="panel-payable">
		<div class="panel-in-payable">
			<div class="opacity panel-in-header"
				style="background-color: #ef9630">บัญชี(ล้านบาท)<br>
					<table cellpadding="0" cellspacing="0" width="100%">
						<tr>
							<td rowspan="2" width="25%">REP</td>
							<td rowspan="2" width="25%">ยอดชดเชย</td>
							<td colspan="2">OPREFER</td>
						</tr>
						<tr>
							<td width="25%">HMAIN</td>
							<td width="25%">NHSO</td>
						</tr>
					</table>
				</div>
			<div class="panel-in-content" id="payable"
				style="background-color: rgba(239, 133, 10, 0.3);"></div>
			<div class="opacity panel-in-footer"
				style="background-color: #ef9630">
				ตั้งหนี้<br>
				<span class="totalPayable"></span> ล้านบาท <br>จำนวน Rep <span
					id="totalRepPayable"></span> รายการ
			</div>
		</div>
	</div>
</div>
<div class="panel-block" style="width: 33%;">
	<div class="nav-summary" style="margin-left: 0">
		<span class="transfer">ตัดจ่าย <span class="totalTransfer"></span> ล้านบาท<br></span>
	</div>
	<div class="panel-transfer">
		<div class="panel-in-transfer">
			<div class="bg-main panel-in-header"
				style="background-color: #91d84d">การเงิน(ล้านบาท)<br>
					<table cellpadding="0" cellspacing="0" width="99%">
						<tr>
							<td rowspan="2" width="25%">REP</td>
							<td rowspan="2" width="25%">ยอดชดเชย</td>
							<td colspan="2">OPREFER</td>
						</tr>
						<tr>
							<td width="25%">HMAIN</td>
							<td width="25%">NHSO</td>
						</tr>
					</table>
				</div>
			<div class="panel-in-content" id="transfer"
				style="background-color: rgba(145, 216, 77, 0.3);">
				</div>
			<div class="panel-in-footer" style="background-color: #91d84d">
				โอนเงินไป<br>
				<span class="totalTransfer"></span> ล้านบาท <br>จำนวน Rep <span
					id="totalRepTransfer"></span> รายการ
			</div>
		</div>
	</div>
</div>